<template>
  <div>
<!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 头部按钮以及搜索区域 -->
      <el-input class="input-search" v-model="queryInfo.query" placeholder="请输入内容" clearable>
        <el-button slot="append" icon="el-icon-search" @click="searchOrdersInfo"></el-button>
      </el-input>
            <!-- 表格区域 -->
      <el-table :data="ordersList" style="width: 100%" border stripe>
          <el-table-column type="index" label="#" ></el-table-column>
          <el-table-column  prop="order_number" label="订单编号" ></el-table-column>
          <el-table-column  prop="order_id" label="订单数量"></el-table-column>
          <el-table-column  prop="order_price" label="订单价格"></el-table-column>
          <el-table-column  prop="pay_status" label="是否付款">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.pay_status==='0'">未付款</el-tag>
              <el-tag type="danger" v-else>已付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column  prop="is_send" label="是否发货"></el-table-column>
          <el-table-column  prop="create_time" label="下单时间">
            <template slot-scope="scope">{{scope.row.create_time | dataFormat}}</template>
          </el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary"  icon="el-icon-edit" @click="editOrdersInfo(scope.row.order_id)"></el-button>
              <el-button  size="mini"  type="danger"  icon="el-icon-delete" @click="deleteOrdersInfo(scope.row)"></el-button>
              <el-tooltip effect="dark" content="物流信息" placement="top">
                <el-button  size="mini"  type="warning"  icon="el-icon-location" @click="allotInfo()"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
        <!-- 修改订单状态的对话框 -->
    <el-dialog title="修改订单信息" :visible.sync="editOrdersDialogVisible"
      width="50%">
      <el-form :model="editOrdersForm" :rules="editOrdersFormRules" ref="editOrdersFormRef" label-width="80px">
        <el-form-item label="订单号" prop="order_id">
          <el-input v-model="editOrdersForm.order_id" disabled="" style="width=100px"></el-input>
        </el-form-item>
        <el-form-item label="订单价格" prop="order_price">
          <el-input v-model="editOrdersForm.order_price"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" prop="order_number">
          <el-input v-model="editOrdersForm.order_number"></el-input>
        </el-form-item>
        <el-form-item label="支付状态" prop="pay_status">
          <el-select v-model="editOrdersForm.pay_status" placeholder="请选择">
            <el-option v-for="item in payStatusOptions" :label="item.name" :value="item.type" :key="item.type"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="是否发货" prop="is_send">
            <el-select v-model="editOrdersForm.is_send" placeholder="请选择">
              <el-option v-for="item in sendStatusOptions" :label="item.name" :value="item.type" :key="item.type"></el-option>
           </el-select>
          </el-form-item>
          <el-form-item label="支付方式" prop="order_pay">
          <el-select v-model="editOrdersForm.order_pay" placeholder="请选择">
            <el-option v-for="item in payTypeOptions" :label="item.name" :value="item.type" :key="item.type"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOrdersDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOrdersDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--      展示物流进度的对话框-->
    <el-dialog title="物流进度" :visible.sync="showProgressDialogVisible" width="50%">
<!--        时间线 2.6.0版本-->
      <el-timeline :reverse="true">
          <el-timeline-item
            v-for="(activity, index) in progressInfo"
            :key="index"
            :timestamp="activity.time">
            {{activity.context}}
          </el-timeline-item>
        </el-timeline>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 订单数据列表
      ordersList: [],
      // 得到用户列表的
      queryInfo: {
        query: '',
        pagenum: 2,
        pagesize: 3
      },
      // 总记录数目
      total: 0,
      // 控制修改用户的对话框显示和隐藏
      editOrdersDialogVisible: false,
      // 修改用户的对话框的表单
      editOrdersForm: {
        id: '',
        is_send: '',
        order_pay: '',
        order_price: 0,
        order_number: 0,
        pay_status: ''
      },
      // 修改用户表单的验证规则
      editOrdersFormRules: {
        id: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        is_send: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        order_pay: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        order_price: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        order_number: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        pay_status: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      },
      // 支付类型
      payTypeOptions: [
        { type: '0', name: '未支付' },
        { type: '1', name: '支付宝' },
        { type: '2', name: '微信' },
        { type: '3', name: '银行卡' }
      ],
      // 支付状态
      payStatusOptions: [
        { type: '0', name: '未付款' },
        { type: '1', name: '已付款' }
      ],
      // 是否发货
      sendStatusOptions: [
        { type: '是', name: '已发货' },
        { type: '否', name: '未发货' }
      ],
      // 时间线对话框
      showProgressDialogVisible: false,
      // 物流消息
      progressInfo: []
    }
  },
  created () {
    this.getOrdersList()
  },
  methods: {
    // 获取订单数据列表
    async getOrdersList () {
      const { data: res } = await this.$http.get('orders',
        { params: this.queryInfo })
      console.log(res)
      if (res.meta.status !== 200) {
        this.$message.error('获取列表失败')
      } else {
        this.ordersList = res.data.goods
        this.total = res.data.total
      }
    },
    // 分页中改变
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrdersList()
    },
    // 分页中改变
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getOrdersList()
    },
    // 点击搜索按钮
    searchOrdersInfo () {
      console.log(12)
      this.getOrdersList()
    },
    // 编辑按钮
    async editOrdersInfo (rowId) {
      const { data: res } = await this.$http.get('orders/' + rowId)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取信息失败')
      } else {
        this.editOrdersForm = res.data
        console.log(this.editOrdersForm)
        this.editOrdersDialogVisible = true
      }
    },
    // 删除按钮
    deleteOrdersInfo (row) {
      console.log(row)
    },
    // 物流消息
    async allotInfo () {
      const { data: res } = await this.$http.get('/kuaidi/1106975712662')
      console.log(res)
      if (res.meta.status !== 200) {
        this.$message.error('获取物流消息失败')
      } else {
        this.progressInfo = res.data
        this.showProgressDialogVisible = true
      }
    }

  }
}
</script>
<style scoped>
.input-search{
  margin-bottom: 15px;
  width: 300px
}

</style>
